<template>
	<view class="person-content">
		<narvBarSearch titleColor="#fff" titleText="个人中心"></narvBarSearch>
		<view class="person-content-page">
			<view class="vipImg">
				<image src="/static/images/vip.png" mode="aspectFill"></image>
			</view>
			<view class="person-content-page-myInfo">
				<view class="myInfo-myselfInfo">
					<view class="myselfInfo-photo">
						<image src="/static/images/head.jpg" mode="aspectFill"></image>
					</view>
					<view class="myselfInfo-text">
						<view class="text-content">
							
						
						<view class="text-nickName">
							喵喵吗
						</view>
						<view class="myselfInfo-member">
							正式会员
						</view>
						</view>
						<view class="text-id">
							ID:199.234.12
						</view>
					
					</view>
				
					
					
				</view>
				
				<view class="myInfo-feature">
					<template v-for="item in myfeature" :key="item">
						<view class="feature-item">
							<view class="item-image">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="item-text">
								<view class="text-title">
									{{item.title}}
								</view>
								<view class="text-info" v-if="item.type===1">
									当前{{item.content}}分
								</view>
								<view class="text-info" v-else>
									{{item.content}}
								</view>
								
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="person-content-page-order">
				<view class="order-top">
					<view class="order-top-left">
						我的订单
					</view>
					<view class="order-top-right">
						<view class="text">
							查看全部订单
						</view>
						<uni-icons type="right" size="15" color="rgba(170, 170, 170, 1)"></uni-icons>
						
					</view>
				</view>
				<view class="order-content">
					<template v-for="item in orderInfo" :key="item">
						<view class="order-content-item">
							<view class="item-image">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							<view class="item-text">
								{{item.title}}
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="person-content-page-moreInfo">
				<template v-for="item in featureList" :key="item">
					<view class="moreInfo-item">
						<view class="moreInfo-item-left">
							<view class="left-image">
								<image :src="item.img" mode="aspectFill"></image>
							</view>
							
							<view class="left-text" >
								{{item.title}}
							</view>
						</view>
						<view class="moreInfo-item-right">
							<view class="right-text" v-if="item.type===1">
								已签到{{item.content}}天
							</view>
							<view class="right-text" v-else-if="item.type===2">
								已参与{{item.content}}次
							</view>
							<view class="right-text" v-else>
								{{item.content}}
							</view>
							<uni-icons type="right" size="15" color="rgba(170, 170, 170, 1)"></uni-icons>
							
						</view>
					</view>
				</template>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import narvBarSearch from '@/components/narv-bar-search.vue';
	import {ref}from"vue"
	const featureList=ref([{
		type:1,
		title:'签到记录',
		path:"",
		img:'/static/images/imgIcons/签到.svg',
		content:10,
		numb:3,
	},{
		type:2,
		title:'抽奖记录',
		img:'/static/images/imgIcons/抽奖.svg',
		path:"",
		content:5,
		numb:3,
	},{
		title:'收货地址',
		path:"",
		img:'/static/images/imgIcons/地址.svg',
		content:'管理收货地址'
	},{
		title:'退出登录',
		path:"",
		img:'/static/images/imgIcons/退出.svg',
		content:'退出当前账号'
	},])
	const myfeature=ref([{
		img:'/static/images/imgIcons/日历.svg',
		title:'每日签到',
		path:"",
		content:'积分+1'
	},
	{
		type:1,
		img:'/static/images/imgIcons/积分.svg',
		title:'我的积分',
		path:"",
		content:6700
	},
	{
		img:'/static/images/imgIcons/会员认证.svg',
		title:'会员认证',
		path:"",
		content:'已完成认证'
	},])
	
	const orderInfo=ref([	{
		img:'/static/images/imgIcons/待付款.svg',
		title:'待付款',
		path:"",
		
	},	{
		img:'/static/images/imgIcons/待发货.svg',
		title:'待发货',
		path:"",
		
	},	{
		img:'/static/images/imgIcons/待取货.svg',
		title:'待收货',
		path:"",
		
	},{
		img:'/static/images/imgIcons/退款.svg',
		title:'退款/售后',
		path:"",
		
	},])
</script>

<style lang="scss" scoped>
	.person-content {
		
		.person-content-page{
			width: 750rpx;
			padding:20rpx 32rpx;
			box-sizing: border-box;
			height: 100vh;
			display: flex;
			flex-direction: column;
			gap: 40rpx;
			position: relative;
			overflow: hidden;
			&::before{
				z-index: -1;
				content: '';
				display: block;
				width: 984rpx;
				height: 522rpx;
				border-radius: 50%;
				background: #ffd5fd;
				position: absolute;
				left: calc(50% - 492rpx);
				top:-350rpx;
				color:	linear-gradient(to bottom,red,green);
				
			}
			.vipImg{
				width:190rpx;
				height: 194rpx;
				position: absolute;
				top: -66rpx;
				right: -10rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.person-content-page-myInfo{
					width: 696rpx;
					height: 360rpx;
					background-color: rgba(255, 255, 255, 1);
					box-shadow:0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 15px -5px rgba(0,0,0,0.4);
					    
					border-radius: 15rpx;
					display: flex;
					flex-direction: column;
					gap: 68rpx;
					padding-top: 40rpx;
					.myInfo-myselfInfo{
						width:94%;
						height: 100rpx;
						padding: 5rpx 20rpx;
						
						display: flex;
						justify-content: flex-start;
						align-items: center;
						gap:16rpx;
						.myselfInfo-photo{
							width: 100rpx;
							height: 100%;
							border-radius: 50%;
							flex-shrink: 0;
							image{
								width: 100rpx;
								height: 100%;
								border-radius: 50%;
							}
						}
						.myselfInfo-text{
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: start;
							align-items: start;
							gap:6rpx;
							.text-content{
								display: flex;
								gap: 16rpx;
								align-items: center;
								text-align: center;
								.text-nickName{
									font-size: 32rpx;
								}
								
							}
							.myselfInfo-member{
								background-color: rgba(236, 204, 125, 1);
								width: 82rpx;
								height: 32rpx;
								border-radius: 300rpx;
								font-size: 16rpx;
								text-align: center;
								color: rgba(174, 99, 55, 1);
								line-height: 32rpx;
							}
							.text-id{
								font-size: 20rpx;
								color: rgba(102, 102, 102, 1);
							}
						}
					
					
						
					}
					.myInfo-feature{
						width: 100%;
						height: 120rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						
						.feature-item{
							width:96rpx;
							height: 120rpx;
							text-align: center;
							.item-text{
								font-size: 24rpx;
								font-weight: 500;
								.text-info{
									font-size: 16rpx;
									color: rgba(136, 136, 136, 1);
								}
							}
							
							image{
								width: 46rpx;
								height: 46rpx;
							}
							
							
							
						}
					}
					
				}
				.person-content-page-order{
					width: 696rpx;
					height: 240rpx;
					background-color: #fff;
					border-radius: 15rpx;
					box-shadow:0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 15px -5px rgba(0,0,0,0.4);
					.order-top{
					
						width: 91.4%;
						height: 80rpx;
						border-bottom:2px solid rgba(244, 244, 244, 1);
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: rgba(153, 153, 153, 1);
						padding: 0rpx 30rpx ;
						
						font-size: 20rpx;
						.order-top-right{
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.order-content{
						
						width: 100%;
						height: 160rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						
						.order-content-item{
							
							text-align: center;
							font-size: 22rpx;
							color: rgba(0, 0, 0, 1);
							image{
								width: 34rpx;
								height: 32rpx;
							}
						}
						
						
					}
				}
				.person-content-page-moreInfo{
					width: 696rpx;
					height: 386rpx;
					background-color: #fff;
					box-shadow:0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 15px -5px rgba(0,0,0,0.4);
					border-radius: 15rpx;
					.moreInfo-item{
					width: 92%;
					padding: 0rpx 30rpx ;
					height:90rpx;
					
					border-bottom:1px solid rgba(244, 244, 244, 1);
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					// text-align: center;
					image{
						width: 36rpx;
						height:36rpx
					}
					.moreInfo-item-left{
						font-size: 24rpx;
						display: flex;
						gap: 10rpx;
					}
					.moreInfo-item-right{
						font-size: 20rpx;
						display: flex;
						gap: 10rpx;
						color: rgba(153, 153, 153, 1);
					}
					}
				}
		}
	}
	       
</style>